<#include "../include/header.html">

<script type="text/javascript">

    var viewModel = Hap.createGridViewModel("#grid");
</script>
<body>
<div id="page-content">

    <div class="panel" id="query-form"  style="padding-bottom:10px;">
        <form class="form-horizontal" id="myForm">
            <div class="panel-body">
                <div class="row">
                    <!--订单编号 文本-->
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label for="orderCode" class="col-md-4 control-label"><@spring.message
                                "订单编号"/></label>
                            <div class="col-xs-8">
                                <input id="orderCode" type="text" data-role="maskedtextbox"
                                       style="float:left;width:150px;margin-right:5px;" data-bind="value:model.bankCode"
                                       class="k-textbox" required data-required-msg="订单号为必填">
                            </div>
                        </div>
                    </div>
                    <!--公司名称 LOV-->
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label for="orderCompany" class="col-md-4 control-label"><@spring.message
                                "公司名称"/></label>
                            <div class="col-xs-8">
                                <input id="orderCompany" type="text" style="width:150px;margin-right:5px;"
                                       data-bind="value:model.orderCompany,text:model.orderCompany">
                                <script>
                                    $("#orderCompany").kendoLov($.extend(${lovProvider.getLov(base.contextPath, base.locale, "HBI_DEMO_ORDER_COMPANY")}, {}))
                                </script>
                            </div>
                        </div>
                    </div>
                    <!--订单时间 日期-->
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label for="orderDate" class="col-md-4 control-label"><@spring.message
                                "订单日期"/></label>
                            <div class="col-xs-8">
                                <input id="orderDate" style="width:150px;margin-right:5px;"
                                       databind="value:model.orderDate">
                            </div>
                            <script>
                                $("#orderDate").kendoDatePicker({
                                    format: "{0:yyyy-MM-dd}",
                                }).data("kendoDatePicker");
                            </script>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-xs-4">

                    </div>
                    <div class="col-xs-4">

                    </div>

                    <div class="col-xs-4">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4"></div>
                <div class="col-xs-4"></div>
                <div class="col-xs-4">
                     <span id="myForm_reset" class="btn btn-default pull-right" type="button" data-bind="click:reset">
                         <i class="fa fa-eraser" style="margin-right: 3px;"></i>
                         <@spring.message "hap.reset"/>
                     </span>
                    <span id="myForm_query"class="btn btn-primary pull-right" data-bind="click:query" type="submit"
                          style="margin-right: 3px;">
                        <i class="fa fa-search"></i>
                        <@spring.message "hap.query"/>
                    </span>
                </div>
                <script>kendo.bind($('#toolbar-btn'), viewModel);</script>
            </div>
        </form>

    </div>

    <script>kendo.bind($('#query-form'), viewModel);</script>
    <div class="pull-left" id="toolbar-btn" style="padding-bottom:10px;">
        <span id="k-grid-new" class="btn btn-primary k-grid-add" style="float:left;margin-right:5px;" data-bind="click:create"><@spring.message "hap.new"/></span>
        <span id="k-grid-save" class="btn btn-success k-grid-save-changes" data-bind="click:save" style="float:left;margin-right:5px;"><@spring.message "hap.save"/></span>
        <span id="k-grid-delete" data-bind="click:remove" class="btn btn-danger" style="float:left;"><@spring.message "hap.delete"/></span>
    </div>
    <script>kendo.bind($('#toolbar-btn'), viewModel);</script>

    <div style="clear:both">
        <div id="grid"></div>
    </div>
</div>

<script type="text/javascript">
    Hap.initEnterQuery('#query-form', viewModel.query);
    var BaseUrl = _basePath;
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: BaseUrl + "/hbi/demo/company/order/query",
                type: "POST",
                dataType: "json"
            },
            update: {
                url: BaseUrl + "/hbi/demo/company/order/submit",
                type: "POST",
                contentType: "application/json"
            },
            destroy: {
                url: BaseUrl + "/hbi/demo/company/order/remove",
                type: "POST",
                contentType: "application/json"
            },
            create: {
                url: BaseUrl + "/hbi/demo/company/order/submit",
                type: "POST",
                contentType: "application/json"
            },
            parameterMap: function (options, type) {
                if (type !== "read" && options.models) {
                    var datas = Hap.prepareSubmitParameter(options, type)
                    return kendo.stringify(datas);
                } else if (type === "read") {
                    return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)
                }
            }
        },
        batch: true,
        serverPaging: true,
        pageSize: 10,
        schema: {
            data: 'rows',
            total: 'total',
            model: {
                id: "orderId",
                fields: {
                    orderName: {validation: {required: true}},
                    orderDate: {validation: {required: true}},
                    orderCompany: {validation: {required: true}},
                    orderNum: {validation: {required: true}},
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        resizable: true,
        scrollable: true,
        navigatable: false,
        selectable: 'multiple, rowbox',
        dataBound: function () {
            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('${RequestParameters.functionCode!}')
            }
        },
        pageable: {
            pageSizes: [5, 10, 20, 50],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "option",
                title: '<@spring.message "操作"/>',
                width: 120,
                template: function (dataItem) {
                    var html = '<a class="k-grid-column-remove" href="javascript:void(0)" onclick="removeByOrderId (' + dataItem.orderId + ')" style="text-decoration: underline; color: blue; cursor: pointer;float: left; "><@spring.message "hap.delete"/></a>' ;
                    return html;
                }

            },
            {
                field: "orderCode",
                title: '<@spring.message "订单编号"/>',
                width: 120
            },
            {
                field: "orderName",
                title: '<@spring.message "订单名称"/>',
                width: 120
            },
            {
                field: "orderDate",
                title: '<@spring.message "订单日期"/>',
                width: 120,
                format: "{0:yyyy-MM-dd}",
                attributes: {
                    style: "text-align:center"
                },

                editor: function(container, options ,item){
                    //获得订单时间
                    var opts={
                        format:"yyyy-MM-dd"
                    }
                    $('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDatePicker(opts);
                }

            },
            {
                field: "orderCompany",
                title: '<@spring.message "订单公司"/>',
                width: 120,
                template : function(item){
                    return item['orderCompany']||''
                },
                editor          : function (container, options) {
                    $('<input name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoLov($.extend(<@lov "LOV_COMPANY"/>, {
                        textField: 'orderCompany',
                        model    : options.model
                    },{
                        query: function (e) {
                            e.param['enabledFlag'] = 'Y';
                        }
                    }));
                }

            },
            {
                field: "orderNum",
                title: '<@spring.message "订单数量"/>',
                width: 120,

            },
        ],
        editable: true
    });

    //点击查看按钮
    function removeByOrderId(orderId) {

        var a = orderId;

            $.ajax({
                url:'${base.contextPath}/hbi/demo/company/order/removeByOrderId',
                type:'POST', //GET
                async:true,    //或false,是否异步
                data:{
                    "orderId":orderId,
                },
                dataType:'json',
                success:function(data){
                    console.log(data)
                    if (data.success==true){
                        $('#grid').data('kendoGrid').dataSource.read();
                        Hap.showToast({
                            type: "success",
                            message: '<@spring.message "删除成功"/>'
                        });
                    }

                },
                error:function(){
                    console.log('错误');
                    Hap.showToast({
                        type: "error",
                        message: '<@spring.message "删除失败"/>'
                    });
                },

            })


    }
</script>

</body>
</html>